import styled from 'styled-components'
import logo from '@/assets/img/sprite_01.png'
export const HeaderWrap = styled.div`
    background-color:#242424;
    font-size:14px;
    height:75px;
    a{
        color:#FFFFFF;
    }
    .content{
        height:70px;
        display:flex;
        justify-content:space-between;
        .left{
            display:flex;
            align-items:center;
            .select-list a{
                height:70px;
                line-height:70px;
                color:#CCC;
                position:relative;
                display:block;
                padding:0 19px;
                &:hover{
                    background:#000;
                    color:#fff;
                }
            }
            .select-list{
                display:flex;
                a:last-of-type{
                    ::after{
                        content: "";
                        display:block;
                        width: 28px;
                        height: 19px;
                        position:absolute;
                        background-image: url(${logo});
                        z-index:99;
                        background-position: -190px 0;
                        top: 21px;
                        right: -20px;
                    }
                }
                .active{
                    background:#000;
                    color:#fff;
                    &::after{
                        content:'';
                        width:0;
                        height:0;
                        border:6px solid #c20c0c;
                        border-left-color:transparent;
                        border-top-color:transparent;
                        border-right-color:transparent;
                        position:absolute;
                        bottom:0;
                        left: calc(50% - 6px);
                    }
                }
            }
        }
        .right{
            display:flex;
            align-items:center;
            padding-right:22px;
            .search{
                height:32px;
                border-radius:32px;
                width:158px;
                border:none;
                input{
                    font-size:12px !important;
                    line-height:32px;
                }
            }
            .bilog{
                display:block;
                width:90px;
                height:32px;
                line-height: 33px;
                color: #ccc;
                border-radius: 20px;
                margin-left:12px;
                font-size:12px;
                border: 1px solid #4F4F4F;
                text-align:center;
                padding-left:4px;
                :hover{
                    border-color:#fff;
                    color:#fff;
                }
                & + img {
                    width:30px;
                    height:30px;
                    border-radius:50%;
                    margin-left:20px;
                }
                & + div {
                    width: 28px;
                    color: #787878;
                    margin-left:20px;
                    cursor: pointer;
                    &:hover{
                        color:#999;
                    }
                }
            }
        }
    }
    .divider{
        background-color:#c20c0c;
        height:5px;
    }
    .logo{
        display:inline-block;
        width: 176px;
        height: 69px;
        background-position: 0 0;
    }
`